<template>
    <div class="container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="课程任务" name="task">
                <TaskComponent :course_id="form.course_id" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts" setup>
import {  ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { enterCourseApi, sendReadAllMessageApi } from '@/api/course'
import TaskComponent from './task/TaskComponent.vue';

const store = useStore()
const activeName = ref(store.state.user.tabName)

const handleClick = (tab: any) => {
    // 在点击标签时，更新 activeName 的值，以显示对应的标签页
    if (tab.props.name === activeName.value) return
    if (tab.props.name === 'forum') {
        form.value.unread_message_count = 0;
        sendReadAllMessageApi({
            course_id: form.value.course_id,
            user_id: store.state.user.user_id,
        })
    }
    activeName.value = tab.props.name;
    store.commit('user/setTabName', tab.props.name)
}
const queryForm1 = ref({
    course_id: history.state.course_id,
    user_id: store.state.user.user_id,
    is_teacher: store.state.user.is_teacher
})
const form = ref({
    course_id: history.state.course_id,
    title: null,
    cover: null,
    description: '',
    term: '',
    status: null,
    create_time: null,
    update_time: null,
    start_time: null,
    end_time: null,
    stu_counts: null,
    homework_weight: null,
    exam_weight: null,
    experiment_weight: null,
    unread_message_count: 0,
});

function getCourseDetail() {
    enterCourseApi(queryForm1.value).then(res => {
        form.value = res.data;
    })
}

onMounted(() => {
    getCourseDetail()
})
</script>

<style lang="scss" scoped>
</style>